<template>
  <div class="padt5 padl4">
    <mu-chip v-for="item, index in list" v-bind:key="item.id" color="primary" delete @delete="remove(index)" v-if="multi">
      <mu-flex></mu-flex>
      <mu-flex fill>{{item.val}}</mu-flex>
      <mu-flex></mu-flex>
    </mu-chip>
    <mu-chip v-for="item, index in list" v-bind:key="item.id" color="primary" v-if="!multi">
      <mu-flex></mu-flex>
      <mu-flex fill>{{item.val}}</mu-flex>
      <mu-flex></mu-flex>
    </mu-chip>
  </div>
</template>

<script>
import api from '@/assets/js/api'

export default {
  name: 'entityViewer',
  props: {
    id: '',
    entityName: '',
    multi: ''
  },
  data () {
    return {
      list: []
    }
  },
  methods: {
    getData () {
      let _this = this
      api.post('/admin/' + _this.entityName + '/viewer', {id: this.id}, function (res) {
        if (res.s * 1 === 1) {
          _this.list = res.d
        }
      })
    },
    remove (index) {
      let data = this.id
      data = arrayDelIndex(data, index)
      this.list = arrayDelIndex(this.list, index)
      this.$emit('change', data)
    }
  },
  created () {
  },
  mounted () {
    this.getData()
  },
  watch: {
    id () {
      this.getData()
    }
  }
}

function arrayDelIndex (array, index) {
  var tmp = []
  array.map(function (data, i) {
    if (i !== index) {
      tmp.push(data)
    }
  })
  return tmp;
}
</script>

<style scoped>

</style>
